<template>
  <div class="all-img">
    图片信息：
    <!-- <vue-preview
      :slides="setPreview()"
      class="preview"
    /> -->
    <div
      class="preview"
    >
      <div
        v-for="picture in pictures"
        :key="picture.id"
        class="figure"
      >
        <el-image
          class="img"
          :src="picture.url"
          :preview-src-list="picture.urls"
        />
      </div>
    </div>
  </div>
</template>

<script>
// import { str2xml } from '@/api/service/gisShow2020';
import { str2xml, queryPicture } from '@/api/service/gisShow2020';
import { encryptAuto } from '@/api/service/cryptoUtil';

export default {
  name: 'ShowPicture',
  props: {
    infodata: {
      type: Object,
      default: () => {},
    },
    useraccount: {
      type: String,
      default: '',
    },
    openCard: {
      type: Boolean,
      default: false,
    },
    planId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      pictures: [],
    };
  },
  watch: {
    openCard() {
      this.searchPicture();
    },
  },
  created() {
    this.searchPicture();
  },
  methods: {
    // 缩略图参数
    // setPreview() {
    //   // 给预览图设置参数
    //   const images = [];
    //   this.pictures.forEach((img) => {
    //     const pic = img;
    //     // eslint-disable-next-line no-underscore-dangle
    //     pic.src = img._url;
    //     // eslint-disable-next-line no-underscore-dangle
    //     pic.msrc = img._url;
    //     // eslint-disable-next-line no-underscore-dangle
    //     pic.alt = img._id;
    //     // eslint-disable-next-line no-underscore-dangle
    //     pic.title = img._id;
    //     pic.w = 800;// 这是大图的宽
    //     pic.h = 450;
    //     images.push(pic);
    //   });
    //   return images;
    // },
    /* eslint no-underscore-dangle: ["error", { "allow": ["_success", "_id", "_url"] }] */
    async searchPicture() {
      const that = this;
      that.pictures = [];
      const useraccountAES = encryptAuto(that.useraccount);
      const data = await queryPicture(that.planId, that.infodata.id, useraccountAES);
      // ------屏蔽
      // const data = {
      //   data: '',
      // };
      // data.data = '<?xml version="1.0" encoding="UTF-8"?><resultxml success="true" msg=""><datas><data id="31648" name="" url="http://10.18.1.20:8328/3.28/asfdwqasdfaew123asfer5a1w.png"/><data id="31649" name="" url="http://10.18.1.20:8328/3.28/12wsqsa2asd21e3.jpg"/><data id="31650" name="" url="http://10.18.1.20:8328/3.28/12342321.jpg"/><data id="31651" name="" url="http://10.18.1.20:8328/3.28/123wqasdsae3.jpg"/></datas></resultxml>';
      // data.data = '<?xml version="1.0" encoding="UTF-8"?><resultxml success="true" msg=""><datas><data id="37197" name="" url="http://10.18.1.20:8328/3.28/12342321.jpg"/></datas></resultxml>';
      // ----
      const xml1 = str2xml(data.data);
      const jsonObj = that.$x2js.xml2js(xml1);
      if (jsonObj.resultxml._success === 'true') {
        const picdata = jsonObj.resultxml.datas.data;
        const Urls = [];
        if (picdata.length > 1) {
          picdata.forEach((pic) => {
            Urls.push(pic._url);
          });
          picdata.forEach((pic) => {
            this.pictures.push({
              id: pic._id,
              url: pic._url,
              urls: Urls,
            });
          });
        } else if (picdata._id) {
          Urls.push(picdata._url);
          this.pictures.push({
            id: picdata._id,
            url: picdata._url,
            urls: Urls,
          });
        }
      } else {
        // eslint-disable-next-line no-underscore-dangle
        this.$message.error(jsonObj.resultxml._msg);
      }
      console.log(this.pictures);
    },
    // async searchPicture() {
    //   const that = this;
    //   that.pictures = [];
    //   const useraccountAES = encryptAuto(that.useraccount);
    //   const data = await queryPicture(that.planId, that.infodata.id, useraccountAES);
    //   // ------屏蔽
    //   // const data = {
    //   //   data: '',
    //   // };
    //   // data.data = '<?xml version="1.0" encoding="UTF-8"?><resultxml success="true" msg=""><datas><data id="31648" name="" url="http://10.18.1.20:8328/3.28/asfdwqasdfaew123asfer5a1w.png"/><data id="31649" name="" url="http://10.18.1.20:8328/3.28/12wsqsa2asd21e3.jpg"/><data id="31650" name="" url="http://10.18.1.20:8328/3.28/12342321.jpg"/><data id="31651" name="" url="http://10.18.1.20:8328/3.28/123wqasdsae3.jpg"/></datas></resultxml>';
    //   // ----
    //   // const data1 = '<?xml version="1.0" encoding="UTF-8"?><resultxml success="true" msg=""><datas><data id="37197" name="" url="http://10.18.1.20:8328/3.28/12342321.jpg"/></datas></resultxml>';
    //   const xml1 = str2xml(data.data);
    //   const jsonObj = that.$x2js.xml2js(xml1);
    //   // eslint-disable-next-line no-underscore-dangle
    //   if (jsonObj.resultxml._success === 'true') {
    //     const picdata = jsonObj.resultxml.datas.data;
    //     if (picdata.length > 1) {
    //       this.pictures = picdata;
    //       // picdata.forEach((pic) => {
    //       //   const Urls = [];
    //       //   // eslint-disable-next-line no-underscore-dangle
    //       //   Urls.push(pic._url);
    //       //   this.pictures.push({
    //       //     // eslint-disable-next-line no-underscore-dangle
    //       //     id: pic._id,
    //       //     // eslint-disable-next-line no-underscore-dangle
    //       //     url: pic._url,
    //       //     urls: Urls,
    //       //   });
    //       // });
    //     // eslint-disable-next-line no-underscore-dangle
    //     } else if (picdata._id) {
    //       // const Urls = [];
    //       // // eslint-disable-next-line no-underscore-dangle
    //       // Urls.push(picdata._url);
    //       this.pictures.push({
    //         // eslint-disable-next-line no-underscore-dangle
    //         _id: picdata._id,
    //         // eslint-disable-next-line no-underscore-dangle
    //         _url: picdata._url,
    //       });
    //     }
    //   } else {
    //     // eslint-disable-next-line no-underscore-dangle
    //     this.$message.error(jsonObj.resultxml._msg);
    //   }
    // },
  },
};
</script>

<style lang="scss" scoped>
  .all-img {
    display: flex;
    font-size: 13px;
    margin-left: 7px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(64, 64, 65);
  }
  /deep/ .el-image-viewer__close{
    color: #fff;
  }
  .preview{
    width: calc(100% - 70px);
    display: flex;
    height: 70px;
    flex-wrap:wrap;
    flex-direction: row;
    .figure{
      width: 10%;
      margin: 5px;
      .img{
        width: 100%;
        height: 66px;
        box-shadow: 0 0 8px #999;
        border-radius: 5px;
      }
    }
  }
  /deep/.pswp__button--share{
    display: none;
  }
</style>
